<template>
  <!-- 图片 -->
  <div class="image">
    <div class="imageCont">
      <ul>
        <li v-for="(url, index) in image" :key="index">
          <img :src="url.App_img" alt="" />
          <div class="info">
            <span>2400 x 2072 · png</span>
            <span>freebiesupply.com</span>
          </div>
        </li>
      </ul>
      <ul>
        <li v-for="(url, index) in image" :key="index">
          <img :src="url.App_img" alt="" />
          <div class="info">
            <span>2400 x 2072 · png</span>
            <span>freebiesupply.com</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: [
        {
          App_img:
            "https://tse1-mm.cn.bing.net/th/id/OIP-C.b8HASxFPkrLqZ0fJoLV_YQHaGZ?w=195&h=180&c=7&o=5&dpr=1.25&pid=1.7",
        },
        {
          App_img:
            "",
        },
        {
          App_img:
            "",
        },
        {
          App_img:
            "",
        },
        {
          App_img:
            "",
        },
        {
          App_img:
            "",
        },
        {
          App_img:
            "",
        },
        {
          App_img:
            "",
        },
        {
          App_img:
            "",
        },
        {
          App_img:
            "",
        },
      ],
    };
  },
};
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
.image {
  padding: 10px;
  background-color: #fff;
  margin-top: -2px;
  display: inline-block;
  width: calc(100% - 20px);
  .imageCont {
    width: 100%;
    margin-right: -12px;
    line-height: 1.2em;
    ul {
      padding-bottom: 12px;
      width: auto;
      width: 100%;
      margin-left: 12px;
      li {
        height: 180px;
        margin-right: 12px;
        display: inline-block;
        vertical-align: top;
        margin-top: 10px;
        position: relative;
        box-sizing: border-box;
        cursor: pointer;
        &:hover .info {
          display: block;
        }
        img {
          height: 180px;
          box-shadow: 0 0 0 1px rgb(0 0 0 / 5%), 0 2px 4px 1px rgb(0 0 0 / 14%);
        }
        .info {
          height: 36px;
          top: auto;
          bottom: 0;
          color: #fff;
          background: linear-gradient(transparent, rgba(0, 0, 0, 0.25));
          padding: 12px 0;
          pointer-events: none;
          position: absolute;
          width: 100%;
          display: none;
          font-size: 12px;
          span {
            padding-left: 12px;
            display: block;
          }
        }
      }
    }
  }
}
</style>